productManagementUi = Ext.extend(Ext.Window, {
    title: 'Product management'
    ,iconCls : 'icon-package_preferences'
    ,width: 300
    ,height: 400
    ,buttonAlign: 'center'
    //,modal: true
    ,layout : 'fit'
    ,tbar: [
        {
            xtype: 'button'
            ,id: 'reloadProductsButton'
            ,iconCls: 'icon-refresh'
            ,qtip: 'Reload product list'
        },'-',{
            xtype: 'button'
            ,text: 'Add new product'
            ,id: 'addProductButton'
            ,iconCls: 'icon-package_add'
        },'-',{
            xtype: 'button'
            ,text: 'Delete selected product'
            ,id: 'deleteProductButton'
            ,iconCls: 'icon-package_delete'
        }
    ]
    ,editorDefinitions: {
        xtype: 'editorgrid'
        ,store: 'productCrudStore'
        ,clicksToEdit : 1
        ,autoExpandColumn: 'product'
        ,viewConfig : {
            forceFit: true
        }
        ,colModel : new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
                ,menuDisabled: true
                ,width: 100
                ,resizable: true
                ,editable: true
            }
            ,columns:[
                {
                    header: 'ID'
                    ,dataIndex: 'productId'
                    ,editable: false
                    ,width : 50
                },{
                    header: 'Name'
                    ,dataIndex: 'product'
                    ,editor: {
                        xtype: 'textfield'
                        , fieldLabel: 'Name'
                        ,name: 'product'
                        //,regex: /^\w{2,20}$/
                        //,regexText: '2-20 letters required'
                    }
                }
            ]
        })   
    }
});